<template>
  <el-row>
    <!--  -->
    <el-col :span="24">
      <el-table :data="tableData" style="width: 100% " border :cell-style="{ textAlign: 'center' }">
        <el-table-column header-align="center" prop="id" label="编号" width="50" class="texcenter">
        </el-table-column>
        <el-table-column header-align="center" prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column header-align="center" prop="phone" label="租客电话">
        </el-table-column>
        <el-table-column header-align="center" prop="item" label="项目/小区">
        </el-table-column>
        <el-table-column header-align="center" prop="requestTime" label="请求时间">
        </el-table-column>
        <el-table-column header-align="center" prop="checkingTime" label="看房时间">
        </el-table-column>
        <el-table-column header-align="center" prop="status" label="状态" width="150">
        </el-table-column>
        <el-table-column header-align="center" label="操作" width="200">
          <template slot-scope="scope">
          <el-button type="text" @click="details(scope.row.id)">查看详情</el-button>
            
             <el-button type="text" @click="handleDelete(scope.row.id)" style="color: #FB9678;">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      
      <!-- 分页组件 -->
      <pagenation :total="total" :page-size="pageSize" @changepage="changepage"></pagenation>
    </el-col>
    <!--模态框  -->
    <el-dialog title="看房进度" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-steps :active="activesteps" v-for="(value, index) in gridData" :key="index">
        <el-step title="提交看房申请" description=""><template slot="description">
            {{ value.name }} <br />{{ value.requesdate }}
          </template></el-step>
        <el-step title="房东确认" description=""><template slot="description">
            {{ value.housename }} <br />{{ value.housetel }}
          </template></el-step>
        <el-step title="线下看房" description=""></el-step>
        <el-step title="完成" description=""></el-step>
      </el-steps>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogbtn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- <el-row>
      <el-col :span="24">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination> 
        </el-col>
        </el-row> -->
  </el-row>
</template>

<script>
import pagenation from '@/components/ht/pagenation.vue'
export default {

  created() {
  
    this.http(1)

  },
  data() {
    return {
      total: 0,
      pageSize: 10,
      dialogVisible: false,
      activesteps: 1,
      gridData: [],
      date: 0,
      tableD: [],
      tableData: [],
      nowpage:1,
    };
  },
  components: { pagenation },

  methods: {
    //渲染函数
    http(page) {
      // console.log(page);
      this.$axios({
        method: 'get',
        url: '/houseRequest/list',
        params: {
          page: page,
          limit: 10
        }
      })
        .then(res => {
          // console.log(res);
          if (res.code == 0) {
            this.total = res.count
            // console.log(this.total);

            this.tableData = res.data;
            // console.log(this.tableData);
            this.tableD = this.tableData
            this.tableData.forEach((el, index) => {
              // 状态转换
              if (el.status) {
                switch (el.status) {
                  case 1:
                    el.status = '待看房'
                    break;
                  case 2:
                    el.status = '待确认'
                    break;
                  case 3:
                    el.status = '已完成'
                    break;
                  case 4:
                    el.status = '已取消'
                    break;

                  default:
                    break;
                }
              }
              //时间转换
              if (el.requestTime) {
                this.date = new Date(el.requestTime);
                var year = this.date.getFullYear();
                var mon = this.date.getMonth() + 1;
                var day = this.date.getDate()
                var hour = this.date.getHours();
                var min = this.date.getMinutes();
                var sec = this.date.getSeconds();
                mon = mon < 10 ? "0" + mon : mon;
                day = day < 10 ? "0" + day : day;
                hour = hour < 10 ? "0" + hour : hour;
                min = min < 10 ? "0" + min : min;
                sec = sec < 10 ? "0" + sec : sec;
                el.requestTime = year + '-' + day + '-' + hour + ':' + min + ':' + sec
              }
              if (el.checkingTime) {
                this.date = new Date(el.checkingTime);
                var year = this.date.getFullYear();
                var mon = this.date.getMonth() + 1;
                var day = this.date.getDate()
                var hour = this.date.getHours();
                var min = this.date.getMinutes();
                var sec = this.date.getSeconds();
                mon = mon < 10 ? "0" + mon : mon;
                day = day < 10 ? "0" + day : day;
                hour = hour < 10 ? "0" + hour : hour;
                min = min < 10 ? "0" + min : min;
                sec = sec < 10 ? "0" + sec : sec;
                el.checkingTime = year + '-' + day + '-' + hour + ':' + min + ':' + sec
              }
            })
          }

        })
    },

    //分页
    changepage(num) {
      this.nowpage = num;
      this.http(num)
    },
    details(id) {
      // console.log(id);
      this.dialogVisible = true;
      this.tableD.forEach((el, index) => {
        if (el.id === id) {
          // console.log(el.status);
          switch (el.status) {
            case "已取消":
              this.activesteps = 1;
              break;
            case "待确认":
              this.activesteps = 2;
              break;
            case "待看房":
              this.activesteps = 3;
              break;
            case "已完成":
              this.activesteps = 4;
              break;
          }
          this.gridData.push(this.tableD[index]);
        }
      });
      // console.log(this.gridData);
      //
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.gridData = [];
        })
        .catch((_) => { });
    },
    dialogbtn() {
      this.dialogVisible = false;
      this.gridData = [];
    },
  
    handleDelete(id) {
      // console.log(id);

      this.$confirm("你确认要删除吗？")


        .then((res) => {
          // 点击确定时执行
          //删除的请求接口
          this.$axios({
            method: 'get',
            url: '/houseRequest/delete',
            params: {
              id: id
            }
          }).then(res => {
            console.log(res);
            if (res.code === 0) {
              //更新页面
            //  this.http(1)
             this.$message.success('删除成功')
             this.changepage(this.nowpage)
            }else{
              this.$message.error('删除失败')
            }
          })
          
        })
        .catch((err) => {
          // 点击取消时执行
          console.log(err); // "cancle"
          this.$message.error('删除失败')
        });
    },


  },
};
</script>

<style scoped>
a {
  margin-left: 20%;
}

.margin {
  margin-top: 20px;
}

.texcenter {
  text-align: center;
}
</style>






























</script>

<style scoped>
a {
  margin-left: 20%;
}
</style>
